<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/pet.css" rel="stylesheet">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/head.js"></script>
    <script src="js/Utils.js"></script>

    <script src="js/mock.js"></script>
    <script src="js/mock/pet.js"></script>

    <div class="head"></div>

    <div class="main">
        <div class="addBox">
            <div class="button" style="width:30%;margin:auto;"><a href="add_pet.html">添加宠物</a></div>
        </div>

    </div>

    <script>
        $('document').ready(function(){

            let parameter = getURIParameter()

            page = parameter['page']
            
            if(!page)
                page = 1
            else if(Number.isNaN(page))
                page = 1
            else page = Number(page)
            
            $.ajax({
                url: baseUrl + 'pets.php?page='+page,
                type : 'GET',
                success : function(res){
                    if(typeof(res) == 'string')
                        res = JSON.parse(res)

                    if(res.code == 200){
                        render(res.data)
                    }else   alert(res.msg)
                }
            })

            function render(data_){
                let data = data_.pet_list
                let nowPage = data_.nowPage
                let totalPage = data_.totalPage

                $('.main').append(`<div class="petBox"></div>`)

                for(let i = 0; i < data.length; i++){
                    $('.main .petBox').append(`
                        <div class="pet">
                            <div class="image">
                                <img src="${baseUrl + data[i].image}" />
                            </div>

                            <div class="type">
                                ${data[i].type}
                            </div>

                            <div class="kind">${data[i].kind}</div>

                            <div class="name_intro">
                                <div class="name">${data[i].name}</div>
                                <div class="intro">${data[i].intro}</div>    
                            </div>

                            <div class="stock">库存:${data[i].stock}</div>
                            <div class="price">￥${data[i].price}</div>


                            <div>
                                <div class="button" id="change" onclick="change('${data[i].id}')">修改</div>    
                            </div>
                            <div>
                                <div class="button" id="del" onclick="del('${data[i].id}')">删除</div>
                            </div>
                        </div>
                    `)
                }

                $('.main').append(`
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                        </ul>
                    </nav>
                `)

                if(page <= 1){
                    $('.pagination').append(`
                        <li class="page-item"><a class="page-link" href="pet_manage.html?page=${1}">上一页</a></li>
                    `)
                }

                else
                    $('.pagination').append(`
                        <li class="page-item"><a class="page-link" href="pet_manage.html?page=${page-1}">上一页</a></li>
                    `)

                for(let i = 1; i <= totalPage; i++){
                    if(i == page){
                        $('.pagination').append(`
                            <li class="page-item active"><a class="page-link" href="pet_manage.html?page=${i}">${i}</a></li>
                        `)
                    }

                    else{
                        $('.pagination').append(`
                            <li class="page-item"><a class="page-link" href="pet_manage.html?page=${i}">${i}</a></li>
                        `)
                    }
                }

                if(page < totalPage)
                    $('.pagination').append(`
                        <li class="page-item"><a class="page-link" href="pet_manage.html?page=${page+1}">下一页</a></li>
                    `)
                else
                    $('.pagination').append(`
                            <li class="page-item"><a class="page-link" href="pet_manage.html?page=${page}">下一页</a></li>
                    `)
            }
        })

        function change(id){
            location.href="change_pet.html?id="+id
        }

        function del(id){
            let data = {
                id
            }
            
            data = JSON.stringify(data)

            $.ajax({
                data,
                url: baseUrl + 'del_pet.php',
                type: 'POST',
                success : function(res){
                    if(typeof(res) == 'string')
                        res = JSON.parse(res)

                    if(res.code == 200){
                        alert(res.msg)
                        location.href="pet_manage.html?page="+page
                    }
                    else alert(res.msg)
                }
            })
        }
    </script>
</body>
</html>